import React, { PureComponent } from "react";
import NumKey from "./numkey";
import FeatureKey from "./featurekey";

export default class Keyboard extends PureComponent {
    render() {
        return (
            <div style={{backgroundColor:'#F2736E',flex:1,flexDirection:'column',justifyContent:'space-between',display:'flex'}}>
                <div style={{flex:1,flexDirection:'row',justifyContent:'space-between',display:'flex'}}>
                    <FeatureKey 
                        display={"C"} 
                        active={false}/>
                    <FeatureKey 
                        display={"="} 
                        active={false}/>
                    <NumKey 
                        display={"0"}/>
                    <FeatureKey 
                        display={"÷"} 
                        active={true}/>
                </div>
                <div style={{flex:1,flexDirection:'row',display:'flex'}}>
                    <NumKey 
                        display={"7"}/>
                    <NumKey 
                        display={"8"}/>
                    <NumKey 
                        display={"9"}/>
                    <FeatureKey 
                        display={"x"} 
                        active={true}/>
                </div>
                <div style={{flex:1,flexDirection:'row',display:'flex'}}>
                    <NumKey 
                        display={"4"}/>
                    <NumKey 
                        display={"5"}/>
                    <NumKey 
                        display={"6"}/>
                    <FeatureKey 
                        display={"-"} 
                        active={true}/>
                </div>
                <div style={{flex:1,flexDirection:'row',display:'flex'}}>
                    <NumKey 
                        display={"1"}/>
                    <NumKey 
                        display={"2"}/>
                    <NumKey 
                        display={"3"}/>
                    <FeatureKey 
                        display={"+"} 
                        active={true}/>
                </div>
            </div>
        );
    }
}